<template>
    <div>
      <el-steps :active="active" align-center>
        <el-step title="待付款" ></el-step>
        <el-step title="待发货" ></el-step>
        <el-step title="已发货" ></el-step>
        <el-step v-if="active != 5" title="已完成" ></el-step>
        <el-step v-if="active != 4" title="退货" ></el-step>
      </el-steps>
      <div v-if="info.orderBase">
        订单信息:{{ info.orderBase.status | filterStatus }}
      </div>
      <div v-if="active == 2">
        <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
          <el-form-item label="物流公司">
            <el-select v-model="form.deliveryCompany" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号">
            <el-input v-model="form.deliverySn"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        
      </div>
      <div v-if="active >2">
        物流信息
      </div>
    </div>
</template>

<script>
import {
  orderDetail,
  sendDone
} from "@/api/orderManage/orderInfo/index"
export default {
    data() {
        return {
          active:1,
          info:{},
          options:["顺丰","申通","中通","韵达"],
          form:{
            orderId:this.$route.params.id,
            deliverySn:"",
            deliveryCompany:""
          }
        };
    },
    computed: {

    },
    filters:{
      filterStatus(val){
        console.log(val);
        var arr = ["待付款","待发货","已发货","已完成","退货中","无效订单"]
        return arr[val]
      }
    },
    created() {
      this.init()
    },
    mounted() {

    },
    methods: {
      init(){
        orderDetail(this.$route.params.id)
      .then(res =>{
        console.log(res)
        this.info = res.data.orderDetail;
        this.active = res.data.orderDetail.orderBase.status + 1;
      })
      },
      onSubmit(){
        sendDone(this.form)
        .then(res =>{
          console.log(res);
          this.init()
        })
      }
    },
};
</script>

<style scoped lang="scss">

</style>
